<template>
  <div>
    <sub-title :subTitle="'商品分类'" :isRefresh="false"></sub-title>
    <div class="body">
      <div class="box-title flex between h-center">
        <span class="font-20">数据列表</span>
        <div class="flex h-center">
          <el-button v-if="second" @click="getList()">返回</el-button>
          <el-button @click="$router.push('category/addCategory')">添加分类</el-button>
        </div>
      </div>
      <el-table class="mall-table" v-loading="loading" :data="tableData" :header-cell-style="headerStyle" :cell-style="tdStyle">
        <el-table-column label="编号">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="分类名称">
          <template slot-scope="scope">{{ scope.row.typeName }}</template>
        </el-table-column>
        <el-table-column label="级别">
          <template slot-scope="scope">{{ scope.row.parentId == '0' ? '一级' : '二级' }}</template>
        </el-table-column>
        <el-table-column label="商品数量">
          <template slot-scope="scope">{{ scope.row.goodsNum }}</template>
        </el-table-column>
        <el-table-column label="数量单位">
          <template slot-scope="scope">{{ scope.row.goodsUnit }}</template>
        </el-table-column>
        <el-table-column label="是否显示">
          <template slot-scope="scope">
            <el-switch @change="handleShow($event, scope.row)" v-model="scope.row.showStatus" :active-value="0" :inactive-value="1" active-color="#5BC0BF" inactive-color="#dedede"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="排序">
          <template slot-scope="scope">{{ scope.row.goodsSort }}</template>
        </el-table-column>
        <el-table-column label="设置" width="260">
          <template slot-scope="scope">
            <span class="table-btn" @click="shiftGoods(scope.row.id)">转移商品</span>
            <span class="table-btn" v-if="scope.row.parentId == 0" @click="$router.push('/goods/category/addCategory?parentId=' + scope.row.id)">新增下级</span>
            <span class="table-btn" v-if="scope.row.parentId == 0" @click="getList(scope.row.id)">查看下级</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span class="table-btn" @click="$router.push('category/addCategory?id=' + scope.row.id)">编辑</span>
            <span class="table-btn" @click="remove(scope.row.id)">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination :isBatch="false" @next="next" :total="total" :pageSize="pageSize"></pagination>
      <el-dialog
          title="转移商品"
          :visible.sync="dialogVisible"
          :append-to-body="true">
        <div class="flex">
          <div class="flex-1">
            <p>原商品分类：</p>
            <el-select v-model="originalId" disabled placeholder="请选择商品分类" class="search-input">
              <el-option :value="item.id" :label="item.typeName" v-for="item in addCategoryList"></el-option>
            </el-select>
          </div>
          <div class="flex-1">
            <p>目标商品分类：</p>
            <el-select v-model="lastId" placeholder="请选择商品分类" class="search-input">
              <el-option :value="item.id" :label="item.typeName" v-for="item in addCategoryList"></el-option>
            </el-select>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateCategoryGoods">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import subTitle from "@/components/subTitle"
  import pagination from "@/components/pagination"
  import mixin from "@/utils/mixin"
  export default {
    name: "category",
    mixins: [mixin],
    components: {
      subTitle,
      pagination
    },
    data(){
      return{
        tableData: [],
        dialogVisible: false,
        second: false,
        originalId: '',
        lastId: '',
        addCategoryList: [],
      }
    },
    mounted(){
      this.getList();
      this.$http.post("merchantGoodsType/merchant_goods_type_list").then((res) => {
        this.addCategoryList = res;
      })
    },
    methods: {
      getList(id){
        var parentId;
        if (id){
          parentId = id;
          this.childCategoryId = id;
          this.second = true;
        } else {
          parentId = 0;
          this.second = false;
        }
        this.loading = true;
        this.currentPage = 1;
        this.$http.post("merchantGoodsType/merchant_goods_type_list_page",{
          parentId: parentId,
          currentPage: this.currentPage,
          pageSize: this.pageSize,
        }).then((res) => {
          this.tableData = res.list;
          this.total = res.totalCount;
        }).finally(() => {
          this.loading = false;
        })
      },
      next(){
        if (this.second){
          this.getList(this.childCategoryId);
        } else {
          this.getList();
        }
      },
      remove(id){
        this.$confirm("确认删除吗?").then(() => {
          this.$http.post("merchantGoodsType/merchant_goods_type_delete", {
            id: id
          }).then(() => {
            this.$msgSuc("删除成功");
            this.getList();
          })
        })
      },
      handleShow($event, data){
        let form = {
          id: data.id,
          typeName: data.typeName,
          parentId: data.parentId,
          goodsUnit: data.goodsUnit,
          goodsSort: data.goodsSort,
          showStatus: $event,
          typeIcon: data.typeIcon,
        };
        this.$http.post("merchantGoodsType/merchant_goods_type_update", form).then(() => {
          this.$msgSuc("操作成功");
        }, (err) => {
          this.$msgErr(err.msg);
        })
      },
      shiftGoods(id){
        this.dialogVisible = true;
        this.originalId = id;
      },
      updateCategoryGoods(){
        this.$http.post("merchantGoodsType/merchant_goods_type_transfer", {
          originalId: this.originalId,
          lastId: this.lastId,
        }).then(() => {
          this.$msgSuc("操作成功");
          this.getList();
          this.dialogVisible = false;
        }, (err) => {
          this.$msgErr(err.msg);
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "~@/assets/css/common";
  .filter-wrap{
    border: $border;
    margin-bottom: 24px;
    >div{
      padding: 0 22px;
      height: 56px;
      &:last-child{
        background-color: $bgColor;
      }
    }
    .search{
      margin-left: 20px;
      margin-right: 0;
    }
  }
  .box-title{
    padding-right: 20px;
    .search-input{
      width: 150px;
      margin-left: 20px;
    }
    .mall-btn:last-child{
      margin-right: 0;
    }
  }
  .search-input{
    width: 200px;
    margin-top: 20px;
  }
</style>